<template>
  <view class="icon-bar">
    <view class="icon-item" v-for="(item,index) in list" :key="index">
      <view class="item-icon">
        <i class="iconfont" :class="item.icon"></i>
      </view>
      <view>{{item.tit}}</view>
    </view>
  </view>
</template>

<script>
const list = [
  {
    icon:'icon-youjian1',
    tit:'我的消息'
  },
  {
    icon:'icon-haoyou',
    tit:'我的好友'
  },
  {
    icon:'icon-icon--copy',
    tit:'个人主页'
  },
  {
    icon:'icon-yifu1',
    tit:'个性装扮'
  },
]

export default {
  data() {
    return {
      list
    }
  },
};
</script>

<style lang="scss">
.icon-bar {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  color: #efecf0;
  .icon-item {
    // flex: 1;
    text-align: center;
    font-size: 24rpx;
    .item-icon{
      margin-bottom: 20rpx;
    }
    .iconfont{
      color: $mian-color;
      font-size: 40rpx;
    }

  }
}
</style>